<div class='container show-badge'>
  <h1>
    {{#link-to 'badges.index'}}{{i18n 'badges.title'}}{{/link-to}}
    {{fa-icon "angle-right"}}
    {{model.displayName}}
  </h1>

  <table class='badges-listing'>
    <tbody>
      <tr>
        <td class='badge'>{{user-badge badge=model}}</td>
        <td class='description'>{{{model.displayDescriptionHtml}}}</td>
        <td class='grant-count'>{{i18n 'badges.granted' count=model.grant_count}}</td>
        <td class='info'>{{i18n 'badges.allow_title'}} {{{view.allowTitle}}}<br>{{i18n 'badges.multiple_grant'}} {{{view.multipleGrant}}}
        </td>
      </tr>
    </tbody>
  </table>

  {{#if showLongDescription}}
  <div class='long-description banner'>
    {{{long_description}}}
  </div>
  {{/if}}

  {{#if userBadges}}
    <div class={{unbound layoutClass}}>
    {{#each ub in userBadges}}
        <div class="badge-user">
          {{#link-to 'user' ub.user classNames="badge-info"}}
              {{avatar ub.user imageSize="large"}}
              <div class="details">
                <span class="username">{{ub.user.username}}</span>
                {{format-date ub.granted_at}}
              </div>
          {{/link-to}}

          {{#if ub.post_number}}
            <a class="post-link" href="{{unbound ub.topic.url}}/{{unbound ub.post_number}}">{{ub.topic.title}}</a>
          {{/if}}
        </div>
      {{/each}}
    </div>

    {{conditional-loading-spinner condition=canLoadMore}}
  {{/if}}
</div>
